<template>
  <div class="login-container">
     <van-nav-bar
      class="page-nav-bar"
      title="登录"
    >
    <!-- // 目前这种解决方案是由问题的 , 如果打开一个浏览器的新页面然后直接访问/login那么上一个界面就是空白界面 -->
    <!--增加如下-->
      <van-icon
        slot="left"
        name="cross"
        @click="$router.back()"  
      />
    </van-nav-bar>
    <!-- 加上ref属性了，可以获取它 -->
    <van-form @submit="onSubmit" ref="loginForm">
      <van-field
        v-model="user.mobile"
        placeholder="请输入手机号"
        name="mobile"
        :rules="userFormRules.mobile"
        type="number"
        maxlength="11"
      >
        <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <van-field
        v-model="user.code"
        placeholder="请输入验证码"
        name="code"
        :rules="userFormRules.code"
        type="number"
        maxlength="6"
      >
        <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
        <!-- <i class="icon icon-mima" slot="left-icon"></i> -->
        <template #button>
          <van-count-down
            v-if="isCountDownShow"
            :time="1000 * 60"
            format="ss s"
            @finish="isCountDownShow = false"
          />
          <van-button
            v-else
            class="send-sms-btn"
            native-type="button"
            round
            size="small"
            type="default"
            @click="onSendSms"
          >
            发送验证码</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit"> 提交 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login,sendSms } from "@/api/user.js";
export default {
  data() {
    return {
      isCountDownShow: false,
      user: {
        mobile: "", // 手机号
        code: "", // 验证码
      },
      userFormRules: {
        mobile: [
          {
            required: true, //必填校验
            message: "手机号不能为空", // 校验失败后的提示信息
            //trigger :'onBlur' //触发方式，默认为onBlur，可以省略
          },
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/, //正则表达式校验
            message: "手机号格式错误",
          },
        ],
        code: [
          {
            required: true,
            message: "验证码不能为空",
          },
          {
            pattern: /^\d{6}$/,
            message: "验证码格式错误",
          },
        ],
      },
    };
  },
  name: "LoginIndex",
  components: {},

  computed: {},

  mounted() {},

  // watch(){},

  methods: {
    async onSubmit() {
      this.$toast.loading({
        duration: 0,
        message: "加载中...",
        forbidClick: true,
      });
      // console.log(this.user);
      try {
        // const res = await login(this.user);
        const { data } = await login(this.user)
         this.$store.commit('setUser', data.data)
         console.log({data});
        console.log("登录成功");
        this.$toast.success("登录成功");
          this.$router.back()
      } catch (err) {
        console.log(err);
        if (err.response.status === 400) {
          console.log("手机号或验证码错误", err);
          this.$toast.fail("手机号或验证码错误");
        } else {
          console.log("登录失败，请稍候重试", err);
          this.$toast.fail("登录失败，请稍候重试");
        }
      }
    },
    async onSendSms() {
      // console.log(onSendSms);
      try {
        // await this.$refs.loginForm.validate('mobile')
        await this.$refs.loginForm.validate("mobile");
      } catch (err) {
        return console.log("验证错误", err);
      }
      // 倒计时
      this.isCountDownShow = true;
      //验证码
      try {
      await sendSms(this.user.mobile)
      console.log(this.user.mobile);
      this.$toast('发送成功')     
      } catch (err) {
        // 发送失败，关闭倒计时
        console.log(err);
        this.isCountDownShow = false;
        if (err.response.status === 429) {
          console.log("验证码错误", err);
          this.$toast.fail("429 接口访问次数受限");
        } else {
          console.log("发送失败，请稍后重试", err);
          this.$toast.fail("发送失败，请稍后重试");
        }
      }
    },
  },
};
</script>
<style scoped lang="less">
.my-container {
  .header {
    height: 361px;
    background: url("~@/assets/banner.png");
    background-size: cover;
  }

  .not-login {
    display: flex;
    justify-content: center;
    align-items: center;
    .login-btn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .mobile-img {
        width: 132px;
        height: 132px;
        margin-bottom: 15px;
      }
      .text {
        font-size: 28px;
        color: #fff;
      }
    }
  }

  .user-info {
    .base-info {
      height: 231px;
      padding: 76px 32px 23px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        .avatar {
          width: 132px;
          height: 132px;
          border: 4px solid #fff;
          margin-right: 23px;
        }
        .name {
          font-size: 30px;
          color: #fff;
        }
      }
    }
    .data-stats {
      display: flex;
      .data-item {
        height: 130px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        .count {
          font-size: 36px;
        }
        .text {
          font-size: 23px;
        }
      }
    }
  }

  .grid-nav {
    .grid-item {
      height: 141px;
      i.toutiao {
        font-size: 45px;
      }
      .toutiao-shoucang {
        color: #eb5253;
      }
      .toutiao-lishi {
        color: #ff9d1d;
      }
      span.text {
        font-size: 28px;
      }
    }
  }

  .logout-cell {
    text-align: center;
    color: #d86262;
  }

  .mb-9 {
    margin-bottom: 9px;
  }
}
</style>

